<template>
  <div v-if="visible" class="floating-panel">
    <span class="close-btn" role="button" aria-label="关闭" tabindex="0" @click="handleCancel" @keydown.enter="handleCancel">×</span>
    <div class="floating-panel__header">载荷边界</div>
    <div class="floating-panel__body">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" size="small" class="load-boundary-form">
        <el-form-item label="载荷类型" prop="loadType">
          <el-radio-group v-model="form.loadType">
            <el-radio label="pointLoad">点载荷</el-radio>
            <el-radio label="edgeLoad">边载荷</el-radio>
            <el-radio label="faceLoad">面载荷</el-radio>
            <el-radio label="bodyLoad">体载荷</el-radio>
            <el-radio label="pressure">压力</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-divider content-position="left">分量 (可为负)</el-divider>

        <!-- 每种载荷类型单独的参数区块 -->
        <div class="components-grid" v-if="form.loadType==='pointLoad'">
          <el-form-item label="Fx" prop="Fx"><el-input-number v-model="form.Fx" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Fy" prop="Fy"><el-input-number v-model="form.Fy" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Fz" prop="Fz"><el-input-number v-model="form.Fz" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Mx" prop="Mx"><el-input-number v-model="form.Mx" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="My" prop="My"><el-input-number v-model="form.My" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Mz" prop="Mz"><el-input-number v-model="form.Mz" :step="1" :controls="false" /></el-form-item>
        </div>

        <div class="components-grid" v-else-if="form.loadType==='edgeLoad'">
          <el-form-item label="Fx" prop="Fx"><el-input-number v-model="form.Fx" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Fy" prop="Fy"><el-input-number v-model="form.Fy" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Fz" prop="Fz"><el-input-number v-model="form.Fz" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Mx" prop="Mx"><el-input-number v-model="form.Mx" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="My" prop="My"><el-input-number v-model="form.My" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Mz" prop="Mz"><el-input-number v-model="form.Mz" :step="1" :controls="false" /></el-form-item>

        </div>

        <div class="components-grid" v-else-if="form.loadType==='faceLoad'">
          <el-form-item label="Fx" prop="Fx"><el-input-number v-model="form.Fx" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Fy" prop="Fy"><el-input-number v-model="form.Fy" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Fz" prop="Fz"><el-input-number v-model="form.Fz" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Mx" prop="Mx"><el-input-number v-model="form.Mx" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="My" prop="My"><el-input-number v-model="form.My" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Mz" prop="Mz"><el-input-number v-model="form.Mz" :step="1" :controls="false" /></el-form-item>
        </div>

        <div class="components-grid" v-else-if="form.loadType==='bodyLoad'">
          <el-form-item label="Fx" prop="Fx"><el-input-number v-model="form.Fx" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Fy" prop="Fy"><el-input-number v-model="form.Fy" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Fz" prop="Fz"><el-input-number v-model="form.Fz" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Mx" prop="Mx"><el-input-number v-model="form.Mx" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="My" prop="My"><el-input-number v-model="form.My" :step="1" :controls="false" /></el-form-item>
          <el-form-item label="Mz" prop="Mz"><el-input-number v-model="form.Mz" :step="1" :controls="false" /></el-form-item>

        </div>

        <div class="components-grid" v-else-if="form.loadType==='pressure'">
          <el-form-item label="P" prop="P"><el-input-number v-model="form.P" :step="1" :controls="false" /></el-form-item>
        </div>

        <el-form-item label="作用域" prop="setKey">
          <el-select v-model="form.setKey" placeholder="选择集合" filterable clearable style="width:240px">
            <el-option v-for="s in availableSets" :key="s.key" :label="s.name" :value="s.key" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" :disabled="!form.setKey" @click="handleConfirm">确认</el-button>
          <el-button size="small" @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
      <div v-if="availableSets.length===0" class="empty-hint">暂无可选集合</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, computed, watch } from 'vue'
import type { ProjectTreeNode } from '@/store/modules/tree'
import { useTreeStore } from '@/store/modules/tree'
import { usePropertyForm } from '../composables/usePropertyForm'
import { useAvailableSets } from '../composables/useAvailableSets'

const props = defineProps<{ node?: ProjectTreeNode | null; projectId?: number | string | null }>()
const emit = defineEmits<{ (e:'cancel'):void; (e:'confirm'):void; (e:'update', v:any):void }>()

const visible = ref(true)
function handleCancel(){ visible.value=false; emit('cancel') }
function handleKey(e:KeyboardEvent){ if(e.key==='Escape'&&visible.value){ handleCancel() } }

const form = reactive({
  loadType: 'pointLoad',
  // 通用力/力矩
  Fx: 0, Fy: 0, Fz: 0,
  Mx: 0, My: 0, Mz: 0,
  // 压力
  P: 0,
  // 作用域集合key
  setKey: '',
})

const rules = {
  loadType: [{ required: true, message: '请选择载荷类型', trigger: 'change' }],
  setKey: [{ required: true, message: '请选择集合', trigger: 'change' }]
}

const treeStore = useTreeStore()
function ensureLoaded(){ if (props.projectId!=null && treeStore.getTree(props.projectId).length===0) treeStore.load(props.projectId) }

const { availableSets } = useAvailableSets(computed(()=>props.projectId), 'setChildren');

const bridgeEmit = (e:'confirm'|'cancel') => { if(e==='confirm'){ emit('update', { ...form }); emit('confirm') } else emit('cancel') }
const { formRef, handleConfirm } = usePropertyForm(form, { node: props.node, projectId: props.projectId, persist: false, namespace: 'loadBoundary' }, bridgeEmit)

onMounted(()=>{ window.addEventListener('keydown',handleKey); ensureLoaded() })
onBeforeUnmount(()=>window.removeEventListener('keydown',handleKey))
watch(()=>props.projectId, ()=>ensureLoaded())
</script>
<style scoped lang="scss">
@use './common.scss' as *;
.load-boundary-form { display:flex; flex-direction:column; gap:8px; }
.components-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:4px 16px; }
.empty-hint { font-size:12px; color:#999; margin-top:4px; }
.floating-panel {
  width: auto;
  min-width: 320px;
  max-width: 90vw;
  height: auto;
  max-height: 90vh;
}
.el-input-number {
  width: auto !important;
  min-width: 60px;
}
</style>